<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../angular-1.5.8/angular.js"></script>
     <style>
        .box {
            width: 200px;
            height: 100px;
            border: 1px dashed red;
            margin: 5px 0;
        }
    </style>
</head>
<body >
    <!--在ng-show和ng-hid以及ng-if中，在事件没有触发的时候ng-show取值只有是TRUE的时候才会显示
    在ng-hide中取值是false才会显示，当点击事件的判断条件是取反的时候，触发三个属性，显示-->




    <!--<button ng-click="show=!show">点击</button>
    <br>
    <div ng-show="show">1, 是否显示</div>
    <div ng-hide="show">2, 是否隐藏</div>
    <div ng-if="show">3, 是否存在</div>-->
    <div ng-app>
        <button ng-click="show=!show">点击</button>
            <div class="box" ng-show="show">1</div>
            <div class="box"  ng-hide="show">2</div>
            <div class="box"  ng-if="show">3</div>
    </div>
</body>
<!--<script>
    angular.module('mainApp',[])
        .controller('mainController',function ($scope){

        })-->
</script>
</html>